import {
  Component,
  OnInit,
  ViewChild,
  HostBinding,
  Input
} from "@angular/core";
import { MatPaginator, MatSort, MatTableDataSource } from "@angular/material";
import { MatBottomSheet, MatBottomSheetRef } from "@angular/material";
import { DetailComponent } from "../detail/detail.component";
import { MAT_BOTTOM_SHEET_DATA } from "@angular/material";
import {
  animate,
  state,
  style,
  transition,
  trigger
} from "@angular/animations";
import {
  LocaleService,
  TranslationService,
  Language,
  DefaultLocale
} from "angular-l10n";

interface AssetsItem {
  coin: string;
  ago: number;
  now: number;
  remark: string;
  txid: string;
  amount: string;
  status: string;
  address: string;
  id: string;
}

/**
 * @title Table with pagination
 */
@Component({
  selector: "app-activity-history",
  templateUrl: "./activity-history.component.html",
  styleUrls: ["./activity-history.component.scss"]
})
export class ActivityHistoryComponent implements OnInit {
  @Language() lang: string;

  locale = "";

  @Input() search;

  @DefaultLocale() defaultLocale: string;

  displayedColumns: string[] = ["coin", "time", "remark", "amount", "status"];

  lists: Array<AssetsItem> = [
    {
      coin: "BTC",
      amount: "0.00002552",
      address: "MHGtdHNwSaQzWaK2N7hxxGmELcZnuRK6fj",
      txid: "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768",
      ago: 1542858853,
      now: 1542860302,
      status: "1",
      remark: "sdlkfjlksdfsd",
      id: "abc"
    },
    {
      coin: "BTC",
      amount: "0.00002552",
      address: "MHGtdHNwSaQzWaK2N7hxxGmELcZnuRK6fj",
      txid: "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768",
      ago: 1542858853,
      now: 1542860302,
      status: "1",
      remark: "sdlkfjlksdfsd",
      id: "abc"
    },
    {
      coin: "BTC",
      amount: "0.00002552",
      address: "MHGtdHNwSaQzWaK2N7hxxGmELcZnuRK6fj",
      txid: "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768",
      ago: 1542858853,
      now: 1542860302,
      status: "1",
      remark: "sdlkfjlksdfsd",
      id: "abc"
    }
  ];

  assetsItem: AssetsItem;

  dataSource;

  @HostBinding("style.width")
  public width = "100%";

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  today;
  constructor(
    private bottomSheet: MatBottomSheet,
    public localeIns: LocaleService
  ) {
    this.locale = this.localeIns.getCurrentLocale();
  }

  ngOnInit() {
    this.today = Date.now();
    this.dataSource = new MatTableDataSource(this.lists);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.addListen();
  }

  addListen() {
    this.localeIns.defaultLocaleChanged.subscribe(() => {
      this.locale = this.localeIns.getCurrentLocale();
    });
  }

  // onDetail() {
  //   this.bottomSheet.open(DetailComponent, {
  //     data: {
  //       lists: [
  //         {
  //           label: "dsf",
  //           content:
  //             "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768"
  //         }
  //       ]
  //     }
  //   });
  // }
}
